<template>
    <div class="main-box">
        <div class="table-box">
            <div class="mb15">
                <Button type="primary" @click="toAdd()">添加角色</Button>
            </div>
            <Table :columns="tableColumns" :data="tableData" stripe>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" @click="toEdit(row)">编辑</Button>
                    <Button type="error" size="small" @click="toDel(row)" :disabled="row.role_id == 1">删除</Button>
                </template>
            </Table>
        </div>

        <!-- 新建/编辑 弹窗 -->
        <Modal v-model="visible" title="角色管理" width="600px">
            <Form :model="formData" ref="form" :rules="rules" :label-width="80">
                <el-row>
                    <el-col :span="12">
                        <FormItem label="角色名称" prop="role_name">
                            <Input type="text" v-model="formData.role_name" placeholder="请输入角色名称" clearable :maxlength="30"></Input>
                        </FormItem>
                    </el-col>
                </el-row>

                <FormItem label="角色描述" prop="role_desc">
                    <Input type="text" v-model="formData.role_desc" placeholder="请输入角色名称" clearable :maxlength="150"></Input>
                </FormItem>
                <FormItem label="权限" prop="auth_ids">
                    <el-tree ref="tree" :data="authList" show-checkbox node-key="id" :default-checked-keys="formData.auth_ids" :props="treeProps" class="auth-tree"></el-tree>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="onCancel">取消</Button>
                <Button type="primary" @click="onSave" @keyup.enter="onSave" :loading="loading">保存</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api";
export default {
    name: "admin-role",
    data() {
        return {
            tableColumns: [
                {
                    title: "角色名称",
                    key: "role_name",
                    minWidth: 100,
                },
                {
                    title: "角色描述",
                    key: "role_desc",
                    minWidth: 200,
                },
                {
                    title: "角色权限",
                    key: "auth_list",
                    ellipsis: true,
                    minWidth: 200,
                },
                {
                    title: "操作",
                    slot: "action",
                    width: 200,
                    align: "center",
                },
            ],
            tableData: [],
            visible: false,
            loading: false,
            authList: [],
            treeProps: {
                label: "name",
            },
            formData: {
                role_id: "",
                role_name: "",
                role_desc: "",
                auth_ids: [],
            },
            rules: {
                role_name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
                auth_ids: [{ required: true, message: "请选择角色权限", trigger: "blur", type: "array" }],
            },
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getData();
            this.getAuthList();
        },
        getData() {
            api.getAdminRoleList().then((res) => {
                this.tableData = res;
            });
        },
        getAuthList() {
            api.getPermissionList().then((res) => {
                this.authList = res;
            });
        },
        toEdit(row) {
            api.getRoleDeatil({
                role_id: row.role_id,
            }).then((res) => {
                this.visible = true;
                this.formData = {
                    ...res,
                    auth_ids: res.auth_lists.map((item) => item.id),
                };
            });
        },
        toAdd() {
            this.visible = true;
            this.formData = this.$options.data().formData;
        },
        toDel(row) {
            api.delRole({
                role_id: row.role_id,
            }).then((res) => {
                this.$Message.success("删除成功!");
                this.getData();
            });
        },
        onCancel() {
            this.visible = false;
        },
        onSave() {
            this.formData.auth_ids = this.$refs.tree.getCheckedKeys();
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    api.saveRoleDeatil({
                        role_id: this.formData.role_id,
                        role_name: this.formData.role_name,
                        role_desc: this.formData.role_desc,
                        auth_ids: this.formData.auth_ids,
                    })
                        .then((res) => {
                            this.$Message.success("保存成功!");
                            this.visible = false;
                            this.getData();
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                }
            });
        },
    },
};
</script>
<style scoped lang="less">
.main-box {
}

/deep/ .auth-tree {
    user-select: none;
}
</style>
